<template>
    <div class="file_upload">
        <el-upload
            @submit.native.prevent
            ref="el_upload"
            action="/"
            :limit="1"
            :on-change="on_change"
            :auto-upload="false"
            :show-file-list="false">
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    </div>
</template>

<script>
export default {   //单个文件选择器组件
    name:"File_upload",
    props:{
        type:{
            type:String,
            default:'image',
        },
        size:{  //文件的大小最大值限制 单位 M
            type:Number,
            default:30,
        },
    },
    data(){
        return{
           file:null,
        }
    },
    methods:{
        on_change(file){  //文件状态发生改变时的钩子
            //console.log(this.$refs.blur);
            this.$refs.el_upload.clearFiles();
            if(file.raw.type.indexOf(this.type)!=-1){
                this.$emit("file_change",file);
            }else{
                this.$notify.error({
                    title: '错误',
                    message: '不支持的文件类型！',
                    position: 'bottom-right',
                });
            }
        },
    },
}
</script>

<style scoped lang="scss">
.file_upload{
    box-sizing: border-box;
    width:fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: start;
    border-radius: 5px;
}
</style>
